<template>
    <div
        v-if="visible"
        class="dialog-container"
    >
        <div class="dialog-box">
            <div class="dialog-header flex flex-jc-sb flex-ai-c">
                <div
                    class="title fc-white fs-24"
                    @click="isSuccess = !isSuccess"
                >
                    充值中心
                </div>
                <div class="close fc-white fs-24">
                    <span
                        class="icon pointer"
                        @click="handleClose"
                    >
                        &times;
                    </span>
                </div>
            </div>
            <div class="dialog-body">
                <div
                    v-if="!isSuccess"
                    class="flex gap-16"
                >
                    <div class="left fs-12">
                        <div class="bold mg-t-12 mg-b-22">发薪权限</div>
                        <div class="left-item flex flex-ai-c">
                            <el-icon class="fc-primary mg-r-5">
                                <Select />
                            </el-icon>
                            <span>5个起发薪席位</span>
                        </div>
                        <div class="left-item flex flex-ai-c">
                            <el-icon class="fc-primary mg-r-5">
                                <Select />
                            </el-icon>
                            <span>无限创建发薪项目数</span>
                        </div>
                        <div class="left-item flex flex-ai-c">
                            <el-icon class="fc-primary mg-r-5">
                                <Select />
                            </el-icon>
                            <span>无卡发薪</span>
                        </div>
                    </div>
                    <div class="center w-full">
                        <div
                            v-if="orderInfo?.expireSeatsCount > 0"
                            class="tip-box fs-12 mg-t-16 flex flex-ai-c"
                        >
                            <el-icon class="fc-orange mg-r-5">
                                <Warning />
                            </el-icon>
                            <span>检测到您</span>
                            <span class="fc-orange">有{{ orderInfo?.expireSeatsCount }}个多出席位到期后将被停用，建议您另外购买，</span>
                            <span>已防为您的工作带来不便。</span>
                        </div>

                        <div
                            class="flex w-full gap-16 mg-t-30"
                            style="justify-content: space-between;"
                        >
                            <div
                                class="shadow-box box1"
                                :class="{ 'selected': isClick }"
                            >
                                <div
                                    class="linear-box pointer"
                                    @click="changeClick"
                                >
                                    <div class="linear-inner-box no-select">
                                        <div class="fs-14 bold">1年<span class="line-through fs-12 normal mg-l-5 fc-lightblack">¥{{ showPrice }}</span></div>
                                        <div
                                            class="fc-orange fs-20 animation ff-dd bold"
                                            :class="{'mg-t-5': !isClick, 'mg-t-16': isClick}"
                                        ><span class="fs-14">¥</span>{{ price }}<span class="fs-14">/年</span></div>
                                        <div class="hot-hint">立省¥{{ showPrice - price }}</div>
                                    </div>
                                    <div class="triangle-box">
                                        <el-icon class="fc-white fs-12 check-box"><Select /></el-icon>
                                        <div class="triange-white"></div>
                                    </div>
                                    <div class="hot">
                                        <img
                                            src="../../assets/recharge/hot.png"
                                            class="icon-hot"
                                            alt=""
                                        >
                                    </div>
                                </div>
                            </div>
                            <div class="shadow-box box2">
                                <div class="linear-box pointer">
                                    <div class="linear-inner-box">
                                        <div class="fs-12 bold mg-b-16 ">另购席位数</div>
                                        <div class="flex flex-jc-sb flex-ai-c">
                                            <div class="fc-orange fs-20 ff-dd bold"><span class="fs-14">¥</span>{{ seatPrice }}<span class="fs-14">/位</span></div>
                                            <el-input-number
                                                v-model="num"
                                                size="small"
                                                :disabled="!canAddSeat"
                                                :min="0"
                                                @change="handleChange"
                                                @click="handleClick"
                                            />
                                        </div>
                                    </div>
                                </div>
                                <div class="screw-container">
                                    <div class="screw-box fs-12">
                                        <div class="screw-content flex flex-ai-c">
                                            <div class="set-pd">当前已有席位数{{ orderInfo.hasSeat }}（已用{{ orderInfo.useSeat }}）
                                            </div>
                                            <el-tooltip
                                                class="box-item"
                                                effect="dark"
                                                placement="right"
                                            >
                                                <template #content>
                                                    <div class="set-tooltip-width">
                                                        产品包含5个发薪席位，超出部分的发薪席位需要另补差价，300元/位。到期未购买的席位，到期后将自动停用。
                                                    </div>
                                                </template>
                                                <el-icon class="fc-orange mg-l-10">
                                                    <Warning />
                                                </el-icon>
                                            </el-tooltip>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="border-box info-detail">
                            <!-- <div class="tab-card flex">
                                <div class="tab-item flex-1 flex flex-ai-c flex-jc-c" :class="{ 'active': curTab === 1 }"
                                    @click="changeTab(1)">
                                    <img src="../../assets/recharge/icon-pay-account.png" alt="" class="img mg-r-5">
                                    公对公转账
                                </div>
                                <div class="tab-item flex-1 flex flex-ai-c flex-jc-c" :class="{ 'active': curTab === 2 }"
                                    @click="changeTab(2)">
                                    <img src="../../assets/recharge/icon-pay-wechat.png" alt="" class="img mg-r-5">
                                    微信扫码
                                </div>
                            </div> -->
                            <div
                                v-show="curTab === 1"
                                class="tab-1"
                            >
                                <div class="flex mg-t-16 gap-16">
                                    <div class="flex1">
                                        <uploadFile
                                            can-compress
                                            v-model:base64File="fileUrl"
                                            prop-name="fileUrl"
                                            :limit="1"
                                            :limit-size="10"
                                            remove-confirm
                                            @success="handleSuccess($event)"
                                            @remove="handleRemove($event)"
                                        >
                                            <span class="tips">添加付款凭证</span>
                                        </uploadFile>
                                    </div>
                                    <div
                                        v-if="bankInfo?.channelName==='苏州蓝豚'"
                                        class="flex-1 fs-12"
                                    >
                                        <div class="mg-b-12 flex">
                                            <span class="fc-grey name-item">企业全称：</span>
                                            <span>苏州蓝豚互动信息科技有限公司</span>
                                        </div>
                                        <div class="mg-b-12 flex">
                                            <span class="fc-grey name-item">银行账号：</span>
                                            <span>554739755956</span>
                                        </div>
                                        <div class="mg-b-12 flex">
                                            <span class="fc-grey name-item">开户行：</span>
                                            <span>中国银行昆山城东支行</span>
                                        </div>
                                        <div class="mg-b-12 flex">
                                            <span class="fc-grey name-item">付款金额：</span>
                                            <span class="bold fc-orange">¥{{ totalMoney }}元</span>
                                        </div>
                                    </div>
                                    <div
                                        v-if="bankInfo?.channelName==='重庆蓝豚'"
                                        class="flex-1 fs-12"
                                    >
                                        <div class="mg-b-12 flex">
                                            <span class="fc-grey name-item">企业全称：</span>
                                            <span>重庆蓝豚互动信息科技有限公司</span>
                                        </div>
                                        <div class="mg-b-12 flex">
                                            <span class="fc-grey name-item">银行账号：</span>
                                            <span>50050108400000001851</span>
                                        </div>
                                        <div class="mg-b-12 flex">
                                            <span class="fc-grey name-item">开户行：</span>
                                            <span>中国建设银行股份有限公司重庆渝北城南支行</span>
                                        </div>
                                        <div class="mg-b-12 flex">
                                            <span class="fc-grey name-item">付款金额：</span>
                                            <span class="bold fc-orange">¥{{ totalMoney }}元</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div
                                v-show="curTab === 2"
                                class="tab-2"
                            >
                                <div class="flex-1 detail-box info-detail">
                                    <div class="name bold mg-b-10">订单详情</div>
                                    <div class="flex gap-48">
                                        <div class="mg-b-10 fs-12 flex-base-300">
                                            <span class="item-name">当前公司：</span>
                                            <span class="item-value">{{ orderInfo.companyName }}</span>
                                        </div>
                                        <div class="mg-b-10 fs-12">
                                            <span class="item-name">订单类型：</span>
                                            <span class="item-value">
                                                <span v-if="isClick">续费</span>
                                                <span v-if="isClick && num">+</span>
                                                <span v-if="num">席位</span>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="flex gap-48">
                                        <div class="mg-b-10 fs-12 flex-base-300">
                                            <span class="item-name">订购时长：</span>
                                            <span class="item-value">1年</span>
                                        </div>
                                        <div class="mg-b-10 fs-12">
                                            <span class="item-name">发薪席位：</span>
                                            <span class="item-value">
                                                <span v-if="isClick">套餐包含<span class="fc-primary mg-l-5 mg-r-5">5个</span>
                                                </span>
                                                另购席位<span class="fc-primary mg-l-5 mg-r-5">{{ num }}</span>个
                                            </span>
                                        </div>
                                    </div>
                                    <div class="fs-12">
                                        <span class="item-name">预计生效时间：</span>
                                        <span class="item-value">付款审核成功后，立即生效</span>
                                    </div>
                                </div>
                                <div class="flex flex-ai-c mg-t-12">
                                    <!-- <div class="flex1">
                                        <uploadFile can-compress :file-url="fileUrl" prop-name="fileUrl" :limit="1"
                                            :limit-size="10" remove-confirm @success="handleSuccess($event)"
                                            @remove="handleRemove($event)">
                                            <span class="tips">添加付款凭证</span>
                                        </uploadFile>
                                    </div> -->
                                    <div class="flex flex-ai-c mg-l-16">
                                        <!-- <img
                                            v-if="bankInfo?.channelName==='苏州蓝豚'"
                                            class="wx-img mg-r-12"
                                            src="../../assets/recharge/wechat-szlt.png"
                                            alt=""
                                        >
                                        <img
                                            v-if="bankInfo?.channelName==='重庆蓝豚'"
                                            class="wx-img mg-r-12"
                                            src="../../assets/recharge/wechat-cqlt.png"
                                            alt=""
                                        > -->
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="button-box flex mg-t-16 flex-btetween">
                            <!-- <el-button
                                class="half"
                                :disabled="!canButtonClick"
                                type="primary"
                                @click="submit"
                            >提交并充值</el-button> -->
                            <div class="fc-grey flex-colum">
                                <div>订单总额(元)</div>
                                <div class="fc-orange bord">¥{{ totalMoney }}元</div>
                            </div>
                            <div
                                v-if="checked"
                                class="bg-green pointer"
                                @click="getRecharge"
                            >
                                <img
                                    src="../../assets/recharge/weixin-recharge-icon.png"
                                    alt=""
                                    class="img mg-r-5 w-h-24"
                                >
                                微信支付
                            </div>
                            <div
                                v-if="!checked"
                                class="bg-dark pointer"
                                @click="getRechargeno"
                            >
                                <img
                                    src="../../assets/recharge/weixin-recharge-icon.png"
                                    alt=""
                                    class="img mg-r-5 w-h-24"
                                >
                                微信支付
                            </div>
                        </div>
                        <div
                            class="mg-t-16 flex flex-ai-c"
                            style="justify-content: end;"
                        >
                            <el-checkbox
                                class="mg-r-5"
                                v-model="checked"
                            >
                                我方已充分阅读并同意
                            </el-checkbox>
                            <a
                                class="fc-primary pointer"
                                @click="toService"
                            >《服务协议》</a>
                            <a
                                class="fc-primary pointer"
                                @click="toPrivate"
                            >《隐私协议》</a>
                        </div>
                    </div>
                    <div class="right">
                        <img
                            :src="avatar"
                            alt=""
                            class="icon-head"
                        >
                        <div class="bold text-center mg-t-12">{{ orderInfo.companyName }}</div>
                        <div class="bold fs-12 fc-grey text-center mg-t-12">团队账号到期时间：{{ orderInfo.accountExpireTime }}</div>
                        <div class="mg-t-30">
                            <div class="flex flex-ai-c mg-b-12 fs-12">
                                <img
                                    src="../../assets/recharge/icon-seat.png"
                                    alt=""
                                    class="icon-seat mg-r-5"
                                >
                                <div>当前共有席位数：{{ orderInfo.hasSeat }}</div>
                            </div>
                            <el-scrollbar class="set-height">
                                <div
                                    v-for="(i, index) in list"
                                    :key="index"
                                    class="flex fs-12 flex-jc-sb mg-b-12"
                                >
                                    <div class="flex">
                                        <div class="flex">{{ typeMap((i as any)?.salesScenario) }} ：<span class="fc-primary">{{ (i as any).salesScenario === 1 ? 5 : (i as
                                                    any).buySeatCount }}</span></div>
                                    </div>
                                    <div>{{ formatDate((i as any)?.seatExpirationTime) }}到期</div>
                                </div>
                            </el-scrollbar>
                        </div>
                        <div class="flex flex-jc-c">
                            <el-button @click="toNext">开通记录</el-button>
                        </div>
                    </div>
                </div>
                <div v-if="isSuccess">
                    <div class="success-container">
                        <img
                            src="../../assets/recharge/success.png"
                            alt=""
                            class="icon-success"
                        >
                        <div class="hint text-center">我们将在1-2个工作日内确认支付结果。确认后，账户将自动完成续费。可留意您的专属客服群消息。也可在<span class="fc-primary">充值中心-团队账户</span>中查看订单状态</div>
                        <div class="shadow-box success-box">
                            <div class="flex flex-jc-sb flex-ai-end">
                                <div class="flex-1">
                                    <div class="fs-18 bold mg-b-24">订单详情</div>
                                    <div class="fs-12 mg-b-12">当前公司：{{ orderInfo?.companyName }}</div>
                                    <div class="fs-12 mg-b-12">订单类型：
                                        <span v-if="isClick">续费</span>
                                        <span v-if="isClick && num">+</span>
                                        <span v-if="num">席位</span>
                                    </div>
                                    <div class="fs-12 mg-b-12">发薪席位：<span v-if="isClick">套餐包含 5 个</span> 另购席位 {{ num }} 个
                                    </div>
                                    <div class="fs-12">预计生效时间：付款审核成功后，立即生效</div>
                                </div>
                                <div class="">
                                    <el-button
                                        type="primary"
                                        @click="toOrderList"
                                    >查看订单</el-button>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <el-dialog
        top="20vh"
        v-model="isup"
        width="450px"
        title="微信扫码支付"
        center
    >
        <div class="popcontent">
            <div claas="img-border" style="width: 200px;
        height: 200px;
        box-sizing: border-box;
        border: 2px solid #F3F3F5;
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;">
                <div
                    id="code"
                    class="code"
                />
            </div>
            <div>应付金额<span class="fc-orange bord">¥{{ totalMoney }}元</span></div>
            <div>剩余支付时间<span class="fc-orange">3分钟</span>，否则订单将自动失效</div>
        </div>
    </el-dialog>
</template>
<script lang="ts">
    import QRCode from "qrcodejs2";
    import user from "@/utils/user";
    import { defineComponent } from "vue";
    import uploadFile from "@/components/upload-file.vue";
    import store from "@/store/index";
    import { getCompanySeatInfo, addRechargeRecord } from "@/api/recharge-record";
    import dayjs from "dayjs";
    import { ElMessage } from "element-plus";
    import { recharge } from "@/api/home";
    export default defineComponent({
        props: {
            show: {
                type: Boolean,
                default: false,
            },
            noNeedRouter: {
                type: Boolean,
                default: false,
            },
        },
        components: {
            uploadFile,
        },
        data() {
            return {
                isup: false,
                qrcode: "" as any,
                window: window as any,
                visible: false,
                num: 0,
                curTab: 2,
                checked: false,
                isClick: false,
                fileUrl: "",
                list: [],
                orderInfo: {} as any,
                isSuccess: false,
                price: 3599,
                showPrice: 6000,
                seatPrice: 300,
            };
        },
        watch: {
            show: {
                handler(newval) {
                    this.visible = newval;
                    if (newval) {
                        this.getData();
                    }
                },
                immediate: true,
            },
            visible(newval) {
                this.$emit("update:show", newval);
                if (!newval) {
                    this.init();
                    this.isSuccess = false;
                }
            },
        },
        computed: {
            totalMoney() {
                return this.isClick
                    ? this.price + this.seatPrice * (this.num ?? 0)
                    : this.seatPrice * (this.num ?? 0);
            },
            canButtonClick() {
                return !!this.fileUrl && this.checked && (this.isClick || this.num);
            },
            avatar() {
                return store.state.avatar;
            },
            bankInfo() {
                return (store.state.bankInfo || {}) as any;
            },
            canAddSeat() {
                return (
                    this.orderInfo.accountExpireTime >=
                        dayjs().format("YYYY-MM-DD") || this.isClick
                );
            },
            // willExpireSeatNumber() {
            //     let list = (this.orderInfo.seatList || []) as any
            //     const res = list.filter((i: any) => (dayjs(i.dueDate) < dayjs(expireDay)) && dayjs(i.dueDate) > dayjs(curDay))
            //     return res.length
            // },
            typeMap() {
                return (type: any) => {
                    const map = {
                        1: "赠送席位",
                        2: "席位购买",
                    };
                    return (map as any)[type];
                };
            },
            formatDate() {
                return (date: any) => {
                    return dayjs(date).format("YYYY-MM-DD");
                };
            },
        },
        emits: ["refresh", "changeTab", "update:show"],
        methods: {
            generateQRCode(url: { codeUrl: string }) {
                this.window.document.getElementById("code").innerHTML = "";
                this.qrcode = new QRCode("code", {
                    text: url.codeUrl, // 二维码所携带的数据
                    width: 170, // 二维码宽度
                    height: 170, // 二维码高度
                });
            },
            getRechargeno() {
                ElMessage({
                    type: "warning",
                    message: "是否确认协议",
                });
            },
            async getRecharge() {
                if (this.num === 0 && !this.isClick) {
                    ElMessage({
                        type: "warning",
                        message: "请选择产品",
                    });
                    return;
                }
                this.isup = true;
                setTimeout(() => {
                    this.isup = false;
                }, 180000);
                const result = await recharge({
                    amount: { total: this.totalMoney },
                    total: this.totalMoney,
                    description: "发薪续费",
                    mchid: 1673440814,
                    useWay: "AccountRecharge",
                    attach: `{month: ${this.isClick ? 12 : 0},paySeat: ${this.num},salesScenario:${this.isClick && this.num !== 0? 3 : !this.isClick && this.num !== 0 ? 2 : 1}}`,
                });
                await this.generateQRCode(result);
            },
            changeClick() {
                this.isClick = !this.isClick;
                if (
                    this.orderInfo.accountExpireTime <
                        dayjs().format("YYYY-MM-DD") &&
                    !this.isClick
                ) {
                    this.num = 0;
                }
            },
            handleClose() {
                this.visible = false;
            },
            handleChange() {
                console.log(11111);
            },
            changeTab(tab: number) {
                this.curTab = tab;
            },
            getData() {
                getCompanySeatInfo({
                    pageNum: 1,
                    pageSize: 10,
                }).then((res: any) => {
                    this.orderInfo = res || {};
                    sessionStorage.setItem(
                        "accountExpireTime",
                        res.accountExpireTime
                    );
                    this.list = res?.seatList.list || [];
                });
            },
            handleSuccess(ev: string) {
                console.log(111, ev);
            },
            handleRemove(ev: string) {
                console.log(222, ev);
            },
            toNext() {
                if (!this.noNeedRouter) {
                    this.$router.push({
                        path: "/recharge/record",
                        query: { tab: "group" },
                    });
                } else {
                    this.$emit("changeTab", "group");
                }
                store.commit("changeRechargeTab", "group-" + new Date().getTime());
                this.visible = false;
            },
            submit() {
                let remark = [];
                let salesScenario = null;
                if (this.isClick) {
                    salesScenario = 1;
                    remark.push("发薪专户续费");
                }
                if (this.num) {
                    salesScenario = 2;
                    remark.push(`另购席位${this.num}个`);
                }
                if (this.isClick && this.num) {
                    salesScenario = 3;
                }
                const query = {
                    payMoney: this.totalMoney,
                    rechargeAmount: 12,
                    voucherUrl: this.fileUrl,
                    receiptId: this.bankInfo.receiptId,
                    buySeatCount: this.num || 0,
                    remark: remark.join(" + "),
                    salesScenario: salesScenario,
                    payMode: this.curTab,
                };
                addRechargeRecord(query).then((res: any) => {
                    // this.visible = false
                    this.isSuccess = true;
                    this.$emit("refresh");
                });
            },
            init() {
                this.num = 0;
                this.isClick = false;
                this.checked = false;
            },
            toService() {
                window.open(location.origin + "/#/agreement/serviceAgreement");
            },
            toPrivate() {
                window.open(location.origin + "/#/agreement/privateAgreement");
            },
            toOrderList() {
                this.visible = false;
                this.$router.push({
                    path: "/recharge/record",
                    query: {
                        tab: "group",
                    },
                });
            },
            handleClick() {
                if (
                    this.orderInfo.accountExpireTime <
                        dayjs().format("YYYY-MM-DD") &&
                    !this.isClick
                ) {
                    ElMessage.error(
                        "您的产品已经到期，续费后即可继续使用并购买席位"
                    );
                }
            },
        },
    });
</script>
<style lang="stylus" scoped>
    .bord {
        font-weight: 700;
    }

    .flex-colum {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
    }

    .w-h-24 {
        width: 24px;
        height: 24px;
    }

    .bg-green {
        width: 130px;
        background-color: #00D679;
        color: #ffffff;
        padding: 11px 17px;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 16px;
    }

    .bg-dark {
        width: 130px;
        background-color: gray;
        color: #ffffff;
        padding: 11px 17px;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 16px;
    }

    .flex-base-300 {
        flex-basis: 250px;
        flex-shrink: 0;
    }

    .gap-48 {
        gap: 0px;
    }

    .info-detail {
        background-color: #FCF8F9;
        border: none !important;
    }

    .flex-btetween {
        justify-content: space-between;
    }

    @font-face {
        font-family: dd;
        src: url('../../assets/font/D-DIN.ttf') format('truetype');
    }

    .ff-dd {
        font-family: dd;
    }

    .dialog-container {
        width: 100%;
        height: 100%;
        position: fixed;
        left: 0;
        top: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1000;
    }

    .dialog-box {
        width: 864px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background: url('../../assets/recharge/image.png') no-repeat -120px -410px;
        border-radius: 15px;
        overflow: hidden;
        background-size: 130%;
    }

    .title {
        padding: 25px 0 35px 16px;
    }

    .close {
        padding-right: 50px;
        font-size: 36px;
    }

    .dialog-header {
        background: rgba(0, 0, 0, 0.7);
    }

    .dialog-body {
        background: #fff;
        border-radius: 15px;
        padding: 20px 16px;
        margin-top: -10px;
    }

    .left {
        width: 160px;
        flex-shrink: 0;
        background: linear-gradient(180deg, #FEF7F7 -7%, #F8F9FD 19%, #FAFBFE 66%, #FFFFFF 86%, #FFFFFF 100%);
        padding: 16px;
        border-radius: 8px;
    }

    .left-item {
        line-height: 32px;
    }

    .mg-b-22 {
        margin-bottom: 22px;
    }

    .year-box {
        background: #FEF9F5;
        border: 3px solid #DCBB98;
        border-radius: 8px;
        height: 114px;
    }

    .detail-box {
        padding: 0 0 16px 0;
        border-radius: 8px;
    }

    .tip-box {
        box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
        padding: 8px;
    }

    .border-box {
        border: 1px solid #DBE1E5;
        padding: 18px 20px;
        border-radius: 12px;
    }

    .tab-card {
        background: #F3F3F5;
        border-radius: 8px;
        padding: 4px;
    }

    .tab-item {
        border-radius: 4px;
        padding: 8px 0px;
        text-align: center;
        cursor: pointer;

        &.active {
            background: #fff;
            box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
        }
    }

    .half {
        flex-basis: 50%;
    }

    .name-item {
        width: 5em;
        text-align: right;
    }

    .wx-img {
        width: auto;
        height: 98px;
        border-radius: 8px;
        background: #fff;
    }

    .box1 {
        width: 150px;
        height: 126px;
        box-sizing: border-box;
    }

    .box2 {
        width: 270px;
        height: 126px;
        box-sizing: border-box;
    }

    .shadow-box {
        padding: 10px;
        height: 147px;
        border-radius: 12px;
        position: relative;
        background: linear-gradient(180deg, #FEF7F7 0%, #F8F9FD 27%, #FAFBFE 64%, #FAFAFA 87%, rgba(245, 243, 243, 0.29) 100%);
        transition: all 0.2s ease;
    }

    .linear-box {
        border-radius: 8px;
        background: #fff;
        box-sizing: border-box;
        padding: 2px;
        box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.1);
        height: 100%;
        position: relative;
        transition: all 0.2s ease;

        &:hover {
            background: linear-gradient(138deg, #FCA2F6 1%, #187EF9 98%, #1E7FF9 98%);
            box-shadow: none;
        }

        &:hover .triangle-box {
            background: linear-gradient(131deg, #FFA2F6 -6%, #A895F7 42%, #187EF9 100%);
        }

        &:hover .triange-white {
            left: -1px;
            bottom: -1px;
            border-bottom: 28px solid #fff;
            border-right: 28px solid transparent;
        }
    }

    .triangle-box {
        position: absolute;
        top: 0;
        right: 0;
        width: 28px;
        height: 28px;
        background: #D8D8D8;
        border-radius: 0 8px 0 0;
    }

    .selected {
        padding: 0;

        .linear-box {
            background: linear-gradient(138deg, #FCA2F6 1%, #187EF9 98%, #1E7FF9 98%);
            box-shadow: none;
        }

        .triangle-box {
            background: linear-gradient(131deg, #FFA2F6 -6%, #A895F7 42%, #187EF9 100%);
        }

        .triange-white {
            left: -1px;
            bottom: -1px;
            border-bottom: 28px solid #fff;
            border-right: 28px solid transparent;
        }
    }

    .triange-white {
        position: absolute;
        left: -1px;
        bottom: -1px;
        width: 0;
        height: 0;
        border-bottom: 30px solid #fff;
        border-right: 30px solid transparent;
    }

    .linear-inner-box {
        width: 100%;
        height: 100%;
        border-radius: 7px;
        background: #fff;
        padding-left: 14px;
        padding-right: 14px;
        padding-top: 35px;
        box-sizing: border-box;
    }

    .hot-hint {
        position: absolute;
        left: 0;
        bottom: -1px;
        background: linear-gradient(90deg, #F2A358 0%, #ED702D 99%);
        width: 100%;
        height: 24px;
        line-height: 20px;
        border-radius: 0 0 8px 8px;
        text-align: center;
        color: #fff;
        font-size: 12px;
    }

    .check-box {
        margin-left: 13px;
        margin-top: 4px;
    }

    .screw-container {
        position: absolute;
        left: 18px;
        top: -10px;
    }

    .screw-box {
        background: #FFEAE4;
        padding: 6px 14px;
        transform: skew(-30deg, 0);
        border-radius: 0 8px 8px 0;
        position: relative;

        &::before {
            position: absolute;
            content: '';
            left: -8px;
            top: 0;
            background: #FFEAE4;
            width: 20px;
            height: 100%;
            transform: skewX(30deg);
            border-radius: 8px 0 0 0;
        }
    }

    .screw-content {
        transform: skew(30deg, 0);
        background: #FFEAE4;
    }

    .set-tooltip-width {
        width: 220px;
    }

    .icon {
        vertical-align: super;
    }

    :deep(.el-upload--picture-card) {
        height: 100px;
        overflow: hidden;
    }

    .right {
        width: 220px;
        flex-shrink: 0;
        background: linear-gradient(180deg, #FEF7F7 -7%, #F8F9FD 19%, #FAFBFE 66%, #FFFFFF 86%, #FFFFFF 100%);
        padding: 16px;
        border-radius: 8px;
    }

    .icon-head {
        display: block;
        width: 86px;
        height: 86px;
        border-radius: 43px;
        background: #ffc;
        margin: 0 auto;
    }

    .set-height {
        height: 200px;
    }

    .icon-success {
        display: block;
        width: 130px;
        margin: 60px auto 35px;
    }

    .success-container {
        width: 650px;
        margin: 0 auto;
    }

    .hint {
        width: 540px;
    }

    .success-box {
        height: auto;
        margin: 24px 0 60px;
        padding: 24px 48px;
    }

    .no-select {
        user-select: none;
    }

    .icon-hot {
        width: 100px;
        height: auto;
        position: absolute;
        top: -18px;
        left: -8px;
    }

    .animation {
        transition: all 0.2s ease;
    }

    .normal {
        font-weight: normal;
    }

    .line-through {
        text-decoration: line-through;
    }

    .fc-lightblack {
        color: #565868;
    }

    .popcontent {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-direction: column;
    }

    .img-border {
        width: 200px;
        height: 200px;
        box-sizing: border-box;
        border: 2px solid #F3F3F5;
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>